<style lang="less">
@import '../../assets/css/table.less';
@import '../../assets/css/common.less';
</style>
<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <Row class="live_wrapper">

          <Button type="primary"
                  style="float:right;width: 90px;height: 34px;font-size: 14px;"
                  @click="addManager">
            添加账号
          </Button>
          <Input v-model="filter.keyword"
                 @on-search="search"
                 search
                 enter-button="搜索"
                 placeholder="请输入账号"
                 style="float:right;display:inline-table; width: 210px; margin-right:10px" />
          <Select v-model="filter.status"
                  style="float:right;width:200px; margin-right:10px"
                  @on-change="search()">
            <Option value="-1">全部状态</Option>
            <Option value="0">停用</Option>
            <Option value="1">启用</Option>
          </Select>
          <Select v-model="filter.role"
                  style="float:right;width:200px; margin-right:10px"
                  @on-change="search()">
            <Option value="-1">全部角色</Option>
            <Option v-for="(item, key) in role_list"
                    :value="item.name"
                    :key="key"
                    v-if="item.name != '超级管理员'">{{ item.name }}</Option>
          </Select>
        </Row>
        <Row class="margin-top-10 table_pattern">
          <Table :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="manage_create"
           :title="formValidate.id==0 ? '添加账号' : '编辑账号'"
           width="40%"
           class="goods_modal"
           :mask-closable="false">
      <Form :model="formValidate"
            ref="formValidate"
            :label-width="90"
            style="width: 80%;margin: 0 auto;padding-top: 28px;">
        <FormItem label="手机号"
                  prop="phone">
          <Input v-model="formValidate.phone"
                 placeholder="请输入手机号" />
        </FormItem>
        <FormItem label="密码"
                  prop="password">
          <Input v-model="formValidate.password"
                 placeholder="请输入密码" />
        </FormItem>
        <FormItem label="姓名"
                  prop="name">
          <Input v-model="formValidate.name"
                 placeholder="请输入姓名" />
        </FormItem>
        <FormItem label="头像"
                  prop="header">
          <div>
            <Row type="flex"
                 justify="start"
                 align="middle"
                 class="height-100">
              <div style="display: block;text-align: center;">
                <Upload ref="upload"
                        :max-size="500"
                        :show-upload-list="false"
                        action="https://up.qiniup.com"
                        :on-format-error="handleFormatError"
                        :before-upload="handleBeforeUpload"
                        :on-progress="handleProgress"
                        :on-success="handleSuccess"
                        :on-error="handleError"
                        :data="{token:upload_token}">
                  <Button header="ios-cloud-upload-outline">上传头像</Button>
                  <span style="padding-left:20px; color:#999">建议尺寸: 160*160px，JPG、PNG、JPEG格式，图片小于500KB</span>
                </Upload>
              </div>
            </Row>
            <Row class="margin-top-20">
              <div class=""
                   v-if="this.formValidate.header">
                <template>
                  <div class="demo-upload-list">
                    <img :src="this.formValidate.header"
                         style='width:100px; height:100px'>
                    <div class="demo-upload-list-cover">
                      <header type="ios-eye-outline"
                              @click.native="handleView(this.formValidate.header)"></header>
                      <header type="ios-trash-outline"
                              @click.native="handleRemove()"></header>
                    </div>
                  </div>
                </template>
              </div>
            </Row>
          </div>
        </FormItem>
        <FormItem label="角色"
                  prop="role">
          <Select v-model="formValidate.role"
                  style="width:200px">
            <Option v-for="(item, key) in role_list"
                    :value="item.name"
                    :key="key"
                    v-if="item.name != '超级管理员'">{{ item.name }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div class="btns">
        <Button :loading="saving"
                type="primary"
                @click="handleSubmit('formValidate')"
                style="margin-left:40%">提交</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getQiniu, getAdminList, createAdmin, changeUserStatus, roleList } from '@/api/main'
import Time from '@/tool/Time'
import User from '@/model/User'
import config from '@/config'
export default {
  data () {
    return {
      upload_token: '',
      qiniu_url: '',
      visible: false,
      filter: {
        page: 0,
        keyword: '',
        status: '-1',
        role: '-1'
      },
      list: [],
      loading: true,
      saving: false,
      manage_create: false,
      pagenation: {},
      role_list: [],
      formValidate: {
        id: 0,
        phone: '',
        password: '',
        name: '',
        header: '',
        type: '0',
        role: '',
      },
      columns: [
        {
          key: 'id',
          title: 'id',
        },
        {
          key: 'name',
          title: '姓名',
          render: (h, params) => {
            return h('strong', params.row.name)
          },
        },
        {
          key: 'phone',
          title: '账号',
          render: (h, params) => {
            return h('strong', params.row.phone)
          },
        },
        {
          key: 'role',
          title: '角色',
          render: (h, params) => {
            return h('strong', params.row.role)
          },
        },
        {
          key: 'created_time',
          title: '添加时间',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
        {
          key: 'status',
          title: '状态',
          render: (h, params) => {
            console.log(params)
            if (params.row.status == 1) {
              return h('strong', { style: { color: '#2B76EE' } }, '已启用')
            } else {
              return h('strong', { style: { color: '#D40303' } }, '已停用')
            }
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要' + (params.row.status == 1 ? '停用' : '启用') + '该账号吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      let obj = {}
                      if (params.row.status == 1) {
                        obj.status = 0
                      } else {
                        obj.status = 1
                      }
                      obj.id = params.row.id
                      changeUserStatus(obj).then(res => {
                        if (res.code == 0) {
                          this.$Message.success('操作成功')
                          params.row.status = obj.status
                        } else {
                          this.$Message.error(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        margin: '0 5px 0 0',
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#377EEF'
                      },
                      props: {
                        type: params.row.status == 1 ? 'default' : 'success',
                        placement: 'top',
                        size: 'small',
                      },
                    },
                    params.row.status == 1 ? '停用' : '启用',
                  ),
                ],
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF'
                  },
                  on: {
                    click: () => {
                      //console.log(params.row)
                      this.showManageForm(params.row)
                    },
                  },
                },
                '编辑',
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除该账号吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      let obj = {}
                      obj.id = params.row.id
                      obj.status = -1
                      changeUserStatus(obj).then(res => {
                        if (res.code === 0) {
                          let _this = this
                          this.$Message.success('删除成功')
                          let item = _this.list.find(item => {
                            return item.id === params.row.id
                          })
                          let index = _this.list.indexOf(item)
                          _this.list.splice(index, 1)
                        } else {
                          this.$Message.error(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        margin: '0 5px 0 0',
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#D40303'
                      },
                      props: {
                        type: 'error',
                        placement: 'top',
                        size: 'small',
                      },
                    },
                    '删除',
                  ),
                ],
              ),
            ])
          },
        },
      ],
    }
  },
  methods: {
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.init()
    },
    search () {
      this.filter.page = 0,
        this.init()
    },
    addManager: function () {
      this.manage_create = true
      this.uid = 0
      this.formValidate.id = 0
      this.handleReset('formValidate')
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    showManageForm (obj) {
      this.uid = obj.id
      this.manage_create = true
      this.formValidate = Object.assign({}, obj)
      this.formValidate.type = this.formValidate.type.toString()
    },
    handleSubmit () {
      let _this = this
      if (_this.formValidate.phone == '') {
        _this.$Message.error('请输入手机号'); return;
      }
      if (_this.formValidate.password == '') {
        _this.$Message.error('请输入密码'); return;
      }
      if (_this.formValidate.name == '') {
        _this.$Message.error('请输入姓名'); return;
      }
      if (_this.formValidate.header == '') {
        _this.$Message.error('请上传头像'); return;
      }
      if (_this.formValidate.role == '') {
        _this.$Message.error('请配置角色'); return;
      }
      createAdmin(this.formValidate).then(res => {
        if (res.code === 0) {
          _this.$Message.success('操作成功')
          _this.saving = false
          _this.manage_create = false
          _this.init()
        } else {
          _this.$Message.error(res.text)
        }
      })
    },
    handleFormatError (file) {
      this.$Message.error('文件 ' + file.name + ' 格式不正确，请选择图片文件。')
    },
    handleBeforeUpload (file) {
      if (file.size > 500 * 1024) {
        this.$Message.error("图片大小不能超过500KB");
        return;
      }
    },
    handleProgress (event, file) { },
    handleSuccess (event, file, fileList) {
      this.formValidate.header = file.response.domain + file.response.key
    },
    handleError (event, file) { },
    handleView (img_url) {
      this.imgName = img_url
      this.visible = true
    },
    handleRemove () {
      this.formValidate.header = '';
    },
    async init () {
      let _this = this
      let qiniu = await getQiniu()
      this.upload_token = qiniu.token
      this.qiniu_url = qiniu.url
      getAdminList(this.filter).then(res => {
        if (res.code === 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        } else {
          this.loading = false
          this.$Message.error(res.text)
        }
      })
    }
  },
  mounted () {
    roleList().then(res => {
      if (res.code === 0) {
        this.role_list = res.data
      }
    })
    this.init()
  },
}
</script>
<style lang="less" scoped>
.form_red_label {
	position: relative;
	&:before {
		content: '*';
		font-size: 20px;
		color: #ff4c53;
		border-radius: 50%;
		position: absolute;
		top: 4px;
		left: 37px;
		display: block;
	}
}
</style>
<style lang="less">
.demo-upload-list {
	display: inline-block;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	position: relative;
}

.demo-upload-list img {
	width: 100%;
	height: 100%;
}

.demo-upload-list-cover {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
	display: block;
}

.demo-upload-list-cover i {
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	margin: 40px 6px;
}

p.prompt {
	color: #dddee1;
}

.btn_right {
	width: 1%;
	margin-left: -25px;
}

.special_check {
	width: 22%;
	height: 30px;
	margin-left: 10px;
	display: inline-block;
	padding-left: 1%;
}

#subscription_info {
	div {
		display: flex;
		justify-content: space-between;
		font-size: 15px;
		margin-top: 10px;
		flex-wrap: wrap;

		label {
			width: 30%;
		}
		span {
			width: 60%;
			word-wrap: break-word;
			text-align: right;
		}
	}
}
</style>
